const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
  ],
  theme: {
    safeAreaInset: {
      top: 'top',
      bottom: 'bottom',
      left: 'left',
      right: 'right'
    },
    extend: {
      height: {
        '128': '32rem',
      },
      rotate: {
        '135': '135deg'
      }
    },
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    plugin(function ({ addUtilities, matchUtilities, theme }) {
      matchUtilities(
        {
          'safe-area-inset': (value) => ({
            ['-webkit-padding-' + value]: `constant(safe-area-inset-${value});`,
            ['padding-' + value]: `env(safe-area-inset-${value});`
          }),
        },
        { values: theme('safeAreaInset') }
      )
    }),
  ],
}
